<template>
  <view class="cainter">
    <view class="content">
      <view class="nav">
        <u-icon name="arrow-left"></u-icon>
        <view class="navTitle">
          <text>个人中心</text>
        </view>
      </view>
      <view class="main">
        <view class="mainTop">
          <view class="logo">
            <image :src="userinfo.headurl" mode=""></image>
          </view>
          <view class="userName">
            <text>{{ userinfo.nickname }}</text>
            <view class="icons">
              <image src="/static/my/lightUp1.png" mode=""></image>
              <image src="/static/my/lightUp2.png" mode=""></image>
              <image src="/static/my/lightUp3.png" mode=""></image>
              <image src="/static/my/light4.png" mode=""></image>
              <image src="/static/my/light5.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="mainBottom">
        <view class="certificate" @tap="nextPage(`?type=big`)">
          <image src="/static/my/certificate.png" mode=""></image>
          <text>我的证书</text>
        </view>
        <view class="integral" @tap="nextPage(`/pages/my/integral?type=big`)">
          <image src="/static/my/integral.png" mode=""></image>
          <text>我的积分</text>
        </view>
        <view
          class="information"
          @tap="nextPage(`/pages/my/information?type=big`)"
        >
          <image src="/static/my/information.png" mode=""></image>
          <text>个人信息</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {
      	nickname: "-",
      	phone: "-",
      	headurl: "/static/my/logo2.png"
      }
    };
  },
  mounted: function () {},
  onShow() {
    
  },
  methods: {
	  jfsc(){
		  window.location.href = 'https://www.redcross668.com/productIndex/list?areaId=940';
	  },
	 loadUserInfo() {
	  	let userInfo = uni.getStorageSync("userInfo");
	  	if (userInfo) {
	  		uni.request({
	  			url: "http://redcrossadmin.isaw.top/api/User/GetMyInfo",
	  			data: {
	  
	  			},
	  			method: "GET",
	  			header: {
	  				Authorization: userInfo.token,
	  			},
	  			success: (res) => {
	  				if(res.data.data.nickname){
	  					this.userinfo.nickname=res.data.data.nickname;
	  				}
	  				this.userinfo.phone=res.data.data.phone;
	  				if(res.data.data.headurl){
	  					this.userinfo.headurl=res.data.data.headurl;
	  				}
	  			},
	  		});
	  	}
	  },
    isLogin() {
      var that = this;
      let userInfo = uni.getStorageSync("userInfo");
      if (userInfo == null || userInfo.userId == undefined) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return;
      } else {

      }
    },
    //跳转列表对应页面
    nextPage(url) {
      uni.navigateTo({
        url: url,
        fail() {
          uni.switchTab({
            url: url,
            fail() {
              uni.showToast({
                title: "暂未开通，敬请期待！",
                icon: "none",
              });
            },
          });
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  background: linear-gradient(90deg, #39cdfc, #3da9fa);
  border-bottom-left-radius: 20%;
  border-bottom-right-radius: 20%;

  .nav {
    padding: 30rpx 0;
    display: flex;
    justify-content: center;

    .u-icon {
      margin-left: 20rpx;
      font-size: 44rpx;
      color: #ffffff;
    }

    .navTitle {
      margin-right: 64rpx;
      width: 100%;
      text-align: center;

      text {
        font-size: 34rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }

  .main {
    margin: 0 32rpx 0 32rpx;
    width: auto;
    background: #ffffff;
    border-top-left-radius: 15rpx;
    border-top-right-radius: 15rpx;

    .mainTop {
      padding: 40rpx 0 30rpx 60rpx;
      display: flex;

      .logo {
        position: relative;
        width: 119rpx;
        height: 119rpx;
        //background: #08b1d0;
        border-radius: 50%;

        image {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          width: 105rpx;
          height: 105rpx;
        }
      }

      .userName {
        margin-left: 20rpx;

        text {
          height: 29rpx;
          line-height: 75rpx;
          font-size: 32rpx;
          font-family: PingFang;
          font-weight: 500;
          color: #000000;
        }

        .icons {
          image {
            margin-right: 25rpx;
          }

          image:first-child {
            width: 33rpx;
            height: 29rpx;
          }

          image:nth-child(2) {
            width: 36rpx;
            height: 25rpx;
          }

          image:nth-child(3) {
            width: 25rpx;
            height: 24rpx;
          }

          image:nth-child(4) {
            width: 24rpx;
            height: 20rpx;
          }

          image:last-child {
            width: 20rpx;
            height: 30rpx;
          }
        }
      }
    }
  }
}

.bottom {
  margin: 0 32rpx 0 32rpx;
  width: auto;
  background: #ffffff;
  border-bottom-left-radius: 15rpx;
  border-bottom-right-radius: 15rpx;
}

.mainBottom {
  margin: 0 60rpx 0 60rpx;
  padding: 20rpx 0;
  border-top: 1rpx solid #ecebec;
  display: flex;
  justify-content: space-between;
  text-align: center;

  .certificate {
    image {
      width: 42rpx;
      height: 45rpx;
    }
  }

  .integral {
    image {
      width: 35rpx;
      height: 39rpx;
    }
  }

  .information {
    image {
      width: 44rpx;
      height: 44rpx;
    }
  }

  image {
    margin-top: 10rpx;
  }

  text {
    display: block;
    margin-top: 10rpx;
  }
}
</style>
